<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电瓶维修</title>
    <script src="/aaa/layuiadmin/layui/layui.js"></script>
    <link rel="stylesheet" href="/aaa/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/aaa/layuiadmin/style/admin.css" media="all">
</head>
<body>

<!------------------------------------------------------------->

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">站点名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="addName" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">维修时间</label>
                    <div class="layui-input-block">
                        <div class="layui-input-inline">
                            <input type="text" name="startTime" class="layui-input" id="test-laydate-type-startTime" placeholder="yyyy-MM-dd HH:mm:ss">
                        </div>
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">----</label>
                    <div class="layui-input-block">
                        <div class="layui-input-inline">
                            <input type="text" name="endTime" class="layui-input" id="test-laydate-type-endTime" placeholder="yyyy-MM-dd HH:mm:ss">
                        </div>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">操作员工</label>
                    <div class="layui-input-block">
                        <div class="layui-input-inline">
                            <input type="text" name="name" class="layui-input" id="test-battery-name">
                        </div>
                    </div>
                </div>

                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="battery-break-serach">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                </div>
                <div style="padding-bottom: 10px;">
                    <button class="layui-btn layuiadmin-btn-addbreakbattery" data-type="add">添加</button>
                </div>
            </div>
        </div>

        <div class="layui-card-body">


            <table id="LAY-battery-break" lay-filter="LAY-battery-break"></table>
            <script type="text/html" id="imgTpl">
                <img style="display: inline-block; width: 50%; height: 100%;" src={{ d.avatar }}>
            </script>
            <script type="text/html" id="table-batterbreak">
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i
                        class="layui-icon layui-icon-edit"></i>编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
                        class="layui-icon layui-icon-delete"></i>删除</a>

            </script>
            <script type="text/html" id="battery-breakList">
                {{d.LAY_TABLE_INDEX+1}}
            </script>
        </div>
    </div>
</div>

<!--------------------^^^^^^^^^搜索框及table表格^^^^^^^^^^^^----------------------------->
<!-------------------vvvvv-----添加弹出框-----vvvvv------------------------------>
<div class="layui-form" lay-filter="layui-battery-break-add" id="layui-battery-break-add"
     style="padding: 20px 0 0 0;display: none">
    <div class="layui-form-item">
        <label class="layui-form-label">站点名称</label>
        <div class="layui-col-md6">
            <select name="pid" lay-verify="required" id="selectBreak-Battery" lay-filter="selectBreak-Battery" lay-search="">
            </select>
        </div>

        <label class="layui-form-label">操作员工</label>
        <div class="layui-col-md6">
            <select name="employeeid" lay-verify="required" id="selectBreak-Battery-employeeName" lay-filter="selectBreak-Battery-employeeName" lay-search="">
            </select>
        </div>

        <label class="layui-form-label">维修状态</label>
        <div class="layui-input-inline">
            <select name="repairStatu" lay-verify="required" placeholder="请输入维修状态" id="" lay-filter="" lay-search="">
                <option value="0">未修理</option>
                <option value="1">已修理</option>
            </select>
        </div>

        <label class="layui-form-label">维修时间</label>
        <div class="layui-input-inline">
            <div class="layui-input-inline">
                <input type="text" name="createtime" class="layui-input" id="test-laydate-type-datetime" placeholder="yyyy-MM-dd HH:mm:ss">
            </div>
        </div>

        <div id="battery-break-add" class="layui-layer-btn layui-layer-btn-">
            <a class="layui-layer-btn0" lay-submit lay-filter="battery-break-add">确定</a>
            <a class="layui-layer-btn1">取消</a>
        </div>
    </div>

</div>


<!---------------------^^^^---添加弹出框----^^^^--------------------------------->

<!-----------------------vvvvv修改弹出框vvvvv------------------------------>
<div class="layui-form" lay-filter="layui-battery-break-edit" id="layui-battery-break-edit"
     style="padding: 20px 0 0 0;display: none">
    <div class="layui-form-item">
        <label class="layui-form-label">站点名称</label>
        <div class="layui-input-inline">
            <input type="hidden" name="id">
            <select name="pid" lay-verify="required" id="selectBreak-Battery-edit" lay-filter="selectBreak-Battery" lay-search="">
            </select>
        </div>

        <label class="layui-form-label">维修状态</label>
        <div class="layui-input-inline">
            <select name="repairStatu" lay-verify="required" placeholder="请输入维修状态"   lay-search="">
                <option value="0">未修理</option>
                <option value="1">已修理</option>
            </select>
        </div>

        <label class="layui-form-label">维修时间</label>
        <div class="layui-input-inline">
            <div class="layui-input-inline">
                <input type="text" name="createtime" class="layui-input" id="test-laydate-type-datetime-edit" placeholder="yyyy-MM-dd HH:mm:ss">
            </div>
        </div>

        <label class="layui-form-label">操作员工</label>
        <div class="layui-input-inline">
            <div class="layui-input-inline">
                <select name="employeeid" lay-verify="required" id="selectBreak-Battery-employeeName-edit" lay-filter="selectBreak-Battery-employeeName-edit" lay-search="">
                </select>
            </div>
        </div>

        <div id="battery-break-edit" class="layui-layer-btn layui-layer-btn-">
            <a class="layui-layer-btn0" lay-submit lay-filter="battery-break-edit">确定</a>
            <a class="layui-layer-btn1">取消</a>
        </div>
    </div>
</div>
<!------------------------------------------->
<script type="text/html" id="selectAddName">
    <option value="">请选择一个站点</option>
    {{#  layui.each(d, function(index, item){ }}
    <option value="{{item.pid}}">{{item.addName}}</option>
    {{#  }); }}
</script>
<!------------------获取员工姓名------------------------->
<script type="text/html" id="selectGetName">
    <option value="">请选择操作员工</option>
    {{#  layui.each(d, function(index, item){ }}
    <option value="{{item.employeeid}}">{{item.name}}</option>
    {{#  }); }}
</script>

<script type="text/html" id="role-state">
    {{#  if(d.repairStatu == 0){ }}
    <span class="" >未修理</span>
    {{#  } else { }}
    <span class="" >已修理</span>
    {{#  } }}
</script>

<!---------------------^^^^---修改弹出框----^^^^--------------------------------->


<script>

    layui.use(['layer', 'form', 'element', 'table', 'laydate', 'laytpl'], function () {
        var table = layui.table,
            form = layui.form,
            layer = layui.layer,
            element = layui.element,
            laydate = layui.laydate,
            laytpl = layui.laytpl;

        var $ = layui.$;


        //---------------------表格初始化----------------------------------------------------
        table.render({
            elem: '#LAY-battery-break',
            height: 500,
            url: '/aaa/pbbattery/getRepairBatterys',
            page: true,
            cols: [
                [
                    {field: 'break', title: '编号', align: 'center', templet: '#battery-breakList'},
                    {field: 'addName', title: '站点名称', align: 'center'},
                   //{field: 'repairStatu', title: '维修状态', align: 'center'},
                    {field: 'repairStatu',title: '维修状态', toolbar: '#role-state', align: 'center'},
                    {field: 'name', title: '操作员工', align: 'center'},
                    {field: 'createtime', title: '维修时间', align: 'center'},
                     {field: 'id', title: '', align: 'center'},
                    {field: 'pid', title: '', align: 'center'},
                    {title: '操作', toolbar: '#table-batterbreak', align: 'center'},

                ]
            ], done: function (res, curr, count) {
                $(".layui-table-box").find("[data-field='id']").css("display", "none");
                $(".layui-table-box").find("[data-field='pid']").css("display", "none");
            }
        });
        //-----------------------------------------------------------------------------------------------
        //监听搜索
        form.on('submit(battery-break-serach)', function (data) {
            var field = data.field;
            //执行重载
            table.reload('LAY-battery-break', {
                where: fild
            });
        });
        //---------------编辑和删除---------------------------------
        table.on('tool(LAY-battery-break)', function (obj) {
            /*  var checkStatus = table.checkStatus(obj.config.id);*/
            var data = obj.data;
            if (obj.event === 'edit') {
                form.val('layui-battery-break-edit', {
                    'id':data.id,
                    'pid':data.addName,
                    'name': data.name,
                    'repairStatu':data.repairStatu,
                    'createtime':data.createtime,
                })
                    , layer.open({
                    type: 1
                    , title: '编辑'
                    , content: $('#layui-battery-break-edit')
                    , area: 'auto'
                });

                $.ajax({
                    url: '/aaa/pbbattery/getAddNames',
                    type: 'post',
                    async:false,
                    success: function (data) {
                        var demo = $('#selectAddName');
                        var getTpl = demo.html(), view = $('#selectBreak-Battery-edit');
                        laytpl(getTpl).render(data.data, function (html) {
                            view.html(html);
                        });
                        form.render();
                    }
                });
                $.ajax({
                    url: '/aaa/pbbattery/getEmployeeName',
                    type: 'post',
                    async:false,
                    success: function (data) {
                        var demo = $('#selectGetName');
                        var getTpl = demo.html(), view = $('#selectBreak-Battery-employeeName-edit')
                        laytpl(getTpl).render(data.data, function (html) {
                            view.html(html);
                        });
                        form.render();
                    }
                });
            } else if (obj.event === 'del') {
                layer.confirm('确定删除吗？', function (index) {
                    $.ajax({
                        url: '/aaa/pbbattery/delRepairBattery',
                        type: 'POST',
                        data:{
                            id:data.id
                        } ,
                        success: function (data) {
                            layer.msg(data.msg);
                            table.reload('LAY-battery-break');
                        }
                    });
                });
            }
        });
        //-------提交修改-------------------------------------
        form.on('submit(battery-break-edit)',function (data) {
            var field = data.field;
            $.ajax({
                url:'/aaa/pbbattery/updateRepairBattery',
                type:'POST',
                data:field,
                success:function (data) {
                    layer.msg(data.msg);
                    table.reload('LAY-battery-break');
                }

            });
        });
        //-----------------------------------------------------------------------------------------------------
        laydate.render({
            elem: '#test-laydate-type-datetime'
            ,type: 'datetime'
        });
        laydate.render({
            elem: '#test-laydate-type-datetime-edit'
            ,type: 'datetime'
        });
        laydate.render({
            elem: '#test-laydate-type-startTime'
            ,type: 'datetime'
        });
        laydate.render({
            elem: '#test-laydate-type-endTime'
            ,type: 'datetime'
        });
        //事件
        var active = {
            //添加
            add: function () {
                layer.open({
                    type: 1
                    , title: '添加'
                    , content: $('#layui-battery-break-add')
                    , area: 'auto'
                    , end: function () {
                        window.location.reload();
                    }
                });
                $.ajax({
                    url: '/aaa/pbbattery/getEmployeeName',
                    type: 'post',
                    async:false,
                    success: function (data) {
                        var demo = $('#selectGetName');
                        var getTpl = demo.html(), view = $('#selectBreak-Battery-employeeName')
                        laytpl(getTpl).render(data.data, function (html) {
                            view.html(html);
                        });
                        form.render();
                    }
                });
                $.ajax({
                    url: '/aaa/pbbattery/getAddNames',
                    type: 'post',
                    async:false,
                    success: function (data) {
                        var demo = $('#selectAddName');
                        var getTpl = demo.html(), view = $('#selectBreak-Battery');

                        laytpl(getTpl).render(data.data, function (html) {
                            view.html(html);
                        });
                        form.render();
                    }
                });
            }
        };

        //------add form添加
        form.on('submit(battery-break-add)',function (data) {
            var data = data.field;
            $.ajax({
                type:'post',
                url:'/aaa/pbbattery/addRepairBattery',
                data:data,
                success:function (data) {
                    layer.msg(data.msg);
                    table.reload('LAY-battery-break');
                }
            });
        });
        $('.layui-btn.layuiadmin-btn-addbreakbattery').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
</body>
</html>